<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<div id="app">
  <p v-for="item in list">{{item}}</p>
  <p v-for="(item,index) in list">{{item}},{{index}}</p>
  <p v-for="item in object">{{item}}</p>
  <!-- for对象时，顺序固定，第二个为key，第三个为index -->
  <p v-for="(item,key) in object">{{item}},{{key}}</p>
  <!-- 如果用下面这种写法，index这里会展示为key，因为顺序已经固定好了 -->
  <p v-for="(item,index) in object">{{item}},{{index}}</p>
  <p v-for="(item,key,index) in object">{{item}},{{key}},{{index}}</p>
  <!-- 或者用下面这种写法 -->
  <p v-for="(v,k,i) in object": key="k">{{k}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      list: ['a','b','c'],
      object: {
        name: "jack",
        age:25
      }
    }
  })
</script>
</body>
</html>